<template>
  <div class="ems-content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <div class="tab-content">
      <el-tab-pane label="Dashboard" name="first">
        <div class="content-inner">
          <div class="row">
            <div class="column">
              <EmsDash1Vue/>
            </div>
            <div class="column">
              <EmsDash2Vue/>
            </div>
          </div>
          <div class="row">
            <div class="column">
              <EmsDash3Vue/>
            </div>
            <div class="column">
              <EmsDash4Vue/>
            </div>
          </div>
        </div>
      </el-tab-pane></div>
      <div class="tab-content">
      <el-tab-pane label="Config" name="second">
        <div class="content-inner">
          <div class="row">
            <div class="column">
              <EmsComp1Vue />
            </div>
            <div class="column">
              <EmsComp2Vue />
            </div>
          </div>
          <div class="row">
            <div class="column">
              <EmsComp3Vue />
            </div>
            <div class="column">
              <EmsComp4Vue />
            </div>
          </div>
        </div>
      </el-tab-pane></div>
    </el-tabs>
  </div>
</template>

<script>
import EmsComp1Vue from "../components/EmsComp1.vue";
import EmsComp2Vue from "../components/EmsComp2.vue";
import EmsComp3Vue from "../components/EmsComp3.vue";
import EmsComp4Vue from "../components/EmsComp4.vue";
import EmsDash1Vue from '../components/EmsDash1.vue';
import EmsDash2Vue from '../components/EmsDash2.vue';
import EmsDash3Vue from '../components/EmsDash3.vue';
import EmsDash4Vue from '../components/EmsDash4.vue';


export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {
    EmsComp1Vue: EmsComp1Vue,
    EmsComp2Vue: EmsComp2Vue,
    EmsComp3Vue: EmsComp3Vue,
    EmsComp4Vue: EmsComp4Vue,
    EmsDash1Vue: EmsDash1Vue,
    EmsDash2Vue: EmsDash2Vue,
    EmsDash3Vue: EmsDash3Vue,
    EmsDash4Vue: EmsDash4Vue,
  },
};
</script>

<style scoped>
.ems-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  width: 100vw;
}
.content-inner {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  width: 100vw;
  position: fixed;
}

/* .tab-content {
  height: calc(100vh - 48px);
  width: 100vw;
} */

.row {
  display: flex;
  flex-direction: row;
  height: calc(50vh - 48px);
  width: 100vw;
}

.column {
  height: calc(50vh - 48px);
  width: 50vw;
}

.column1-transfer {
  margin-left: 20px;
  margin-top: 20px;
}

.column1-select {
  margin-left: 20px;
  margin-top: 20px;
}


</style>